* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  min-height: 900px;
  min-width: 1400px;
  display: grid;
  grid-template-rows: 4.5% 1fr 4.5%;
  grid-template-columns: 4.5% 1fr 4.5%;
  background-image: radial-gradient(#213f63 10%, #050c28 90%);
  overflow: hidden;
}

#bg_main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_block,
.bg_block2,
.bg_block3,
.bg_block5 {
  position: absolute;
  opacity: 0.5;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bg_block {
  width: 5px;
  background: repeating-linear-gradient(
    180deg,
    #153b69 0px,
    #153b69 5px,
    transparent 6px,
    transparent 20px
  );
  animation-name: block_flash;
}

@keyframes block_flash {
  0% {
    opacity: 0.5;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0.5;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.5;
  }
}

.bg_block2 {
  width: 20px;
  height: 100%;
  background-image: linear-gradient(to right, #497193, #233f56);
  opacity: 0.1;
  z-index: 2;
  animation-name: block_flash2;
}

@keyframes block_flash2 {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.1;
  }
}

.bg_block3 {
  width: 300px;
  height: 90%;
  background-color: #1e3b53;
  z-index: 2;
  animation-name: block_flash3;
}

@keyframes block_flash3 {
  0% {
    width: 300px;
  }
  20% {
    width: 0;
  }
  40% {
    width: 300px;
  }
  100% {
    width: 300px;
  }
}

.bg_block5 {
  width: 450px;
  height: 100%;
  background-color: #1e3b53;
  opacity: 0.1;
  z-index: 2;
  animation-name: block_flash5;
}

@keyframes block_flash5 {
  0% {
    width: 0;
  }
  50% {
    width: 450px;
  }
  100% {
    width: 450px;
  }
}

.lines, .lines3 {
	display: block;
	position: absolute;
	width: 90%;
	height: 1%;
	top: 4.3%;

	border-top: 1px solid #86d5f9;
	animation: line_flash 6s infinite;
}

.lines3 {
	height: 3%;
	top: 95.7%;
}

.lines::before, .lines::after, .lines3::before, .lines3::after {
	content: '';
	display: block;
	position: absolute;
	width: 10px;
	height: 4px;
	top: -5px;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.lines::before, .lines3::before {
	left: -1.2em;
}

.lines::after, .lines3::after {
	right: -1.2em;
}

@keyframes line_flash {
	0% {
		width: 0%;
	}
	20% {
		width: 90%;
	}
	100% {
		width: 90%;
	}
}

/* Vendor prefixes for better browser support */
@-webkit-keyframes line_flash {
	0% {
		width: 0%;
	}
	20% {
		width: 90%;
	}
	100% {
		width: 90%;
	}
}

@-moz-keyframes line_flash {
	0% {
		width: 0%;
	}
	20% {
		width: 90%;
	}
	100% {
		width: 90%;
	}
}

@-o-keyframes line_flash {
	0% {
		width: 0%;
	}
	20% {
		width: 90%;
	}
	100% {
		width: 90%;
	}
}

@-ms-keyframes line_flash {
	0% {
		width: 0%;
	}
	20% {
		width: 90%;
	}
	100% {
		width: 90%;
	}
}
